<template>
  <!-- shop-industry 店铺行业管理 (查询,新增,修改删除) -->
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>店铺管理</el-breadcrumb-item>
      <el-breadcrumb-item>店铺行业管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <!-- 搜索与添加区域 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入需要查询的行业名称" v-model="queryshop.query"
          clearable
          @clear="getShopBusiList">
          <el-button
          slot="append"
          icon="el-icon-search"
          @click="getShopBusiList"
          clearable></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible=true">添加店铺</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 店铺数量 -->
    <el-card>
      <div> 行业数量 : <span>{{busiList.length}}</span> </div>
    </el-card>

    <!-- table表格 -->
    <el-card>
      <el-table
      :data="busiList"
      stripe
      style="width: 100%">
        <el-table-column label="行业名称"
          prop="busi_name" align="center">
        </el-table-column>
        <el-table-column label="排序"
          prop="busi_sort" align="center">
        </el-table-column>
        <el-table-column label="图片" align="center">
          <template #default="{row}">
            <el-image
            style="width: 100px; height: 100px"
            :src="row.image_url" fit="cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column
        label="操作" align="center">
          <template #default="{row}">
            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
              <el-button type="primary" icon="el-icon-edit" size="mini"
              @click="editDialog(row)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <el-button type="danger" icon="el-icon-delete" size="mini"
              @click="removeUserById(row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加商铺的对话框 -->
    <el-dialog
    title="添加商铺"
    :visible.sync="addDialogVisible"
    width="50%"
    @close="addDialogClosed">
      <!-- 内容主体区域 -->
      <el-form :model="busiInfo" :rules="addFormRules" ref="addFormRef" label-width="80px">
        <el-form-item label="行业名称" prop="busi_name">
          <el-input v-model="busiInfo.busi_name"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="busi_sort">
          <el-input v-model="busiInfo.busi_sort" type="number"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部按钮区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addShop">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑商铺的对话框 -->
    <el-dialog
    title="编辑商铺"
    :visible.sync="editDialogVisible"
    width="50%"
    @close="editDialogClosed">
      <!-- 内容主体区域 -->
      <el-form :model="editBusi" :rules="editFormRules" ref="editFormRef" label-width="80px">
        <el-form-item label="行业名称" prop="busi_name">
          <el-input v-model="editBusi.busi_name"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="busi_sort">
          <el-input v-model.number="editBusi.busi_sort" type="number"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部按钮区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editShop">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'industry',
  data () {
    return {
      // 查询参数对象
      queryshop: {
        query: '',
        pageNum: 1,
        pageSize: 2
      },
      // 行业列表
      busiList: [],
      // 添加对话框显隐
      addDialogVisible: false,
      // 添加店铺信息
      busiInfo: {
        busi_name: '小猪飞侠',
        busi_sort: 222
      },
      //   添加表单的验证规则对象
      addFormRules: {
        busi_name: [
          { required: true, message: '请输入行业名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符之间', trigger: 'blur' }
        ],
        busi_sort: [
          { required: true, message: '请输入排序号', trigger: 'blur' },
          { type: 'number', message: '长度在 1 到 10 个字符之间' }
        ]
      },
      // 编辑行业
      editDialogVisible: false,
      // 编辑店铺信息
      editBusi: {
        busi_name: '小猪飞侠',
        busi_sort: 99,
        busi_id: 0
      },
      //   编辑表单的验证规则对象
      editFormRules: {
        busi_name: [
          { required: true, message: '请输入行业名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符之间', trigger: 'blur' }
        ],
        busi_sort: [
          { required: true, message: '请输入排序号', trigger: 'blur' },
          { type: 'number', message: '长度在 2 到 10 个字符之间', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getShopBusiList()
  },
  mounted () {

  },
  methods: {
    // 获取店铺列表
    async getShopBusiList () {
      const { data: res } = await this.$http.get('shop-busi', { params: this.queryshop })
      console.log(res)
      if (res.meta.status !== 200) return this.$message.error('获取店铺列表失败')
      this.busiList = res.data
    },
    // 监听添加商铺对话框的关闭事件
    addDialogClosed () {
      this.$refs.addFormRef.resetFields()
    },
    // 点击按钮,添加新商铺
    addShop () {
      this.$refs.addFormRef.validate(async valid => {
        // console.log(valid)
        if (!valid) return
        console.log(111)
        // 可以发起添加商铺的网络请求
        const { data: res } = await this.$http.post('shop-busi', this.busiInfo)
        console.log(res)
        if (res.meta.status !== 200) return this.$message.error('添加商铺失败')

        this.$message.success('添加商铺成功')
        // 隐藏添加商铺的对话框
        this.addDialogVisible = false
        // 重新获取商铺列表数据
        this.getShopBusiList()
      })
    },
    // 编辑商铺
    async editDialog (row) {
    //   const { data: res } = await this.$http.get(`shop-busi/${row.busi_id}`)
    //   if (res.meta.status !== 200) return this.$message.error('查询行业信息失败')
      // this.editBusi = res.data
      this.editBusi = row
      console.log(this.editBusi)
      this.editDialogVisible = true
    },
    // 监听编辑商铺对话框的关闭事件
    editDialogClosed () {
      this.$refs.editFormRef.resetFields()
    },
    // 点击按钮,编辑新商铺
    editShop () {
      this.$refs.editFormRef.validate(async valid => {
        // console.log(valid)
        if (!valid) return
        // 可以发起编辑商铺的网络请求
        const { data: res } = await this.$http.put(`shop-busi/${this.editBusi.busi_id}`, this.editBusi)
        console.log(res)
        console.log(this.editBusi.busi_id)
        if (res.meta.status !== 200) return this.$message.error('编辑商铺失败')

        // 隐藏编辑商铺的对话框
        this.editDialogVisible = false
        // 重新获取商铺列表数据
        this.getShopBusiList()
        // 提示修改成功
        this.$message.success('编辑商铺成功')
      })
    },
    // 根据id删除对应的用户信息
    async removeUserById (row) {
      // console.log(id)
      // 弹框询问用户是否删除数据
      const confirmRsults = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消删除，则返回值为字符串 cancel
      // console.log(confirmRsults)
      if (confirmRsults !== 'confirm') return this.$message.info('已取消删除')

      // console.log('确认删除')
      const { data: res } = await this.$http.delete(`shop-busi/${row.busi_id}`)
      console.log(res)
      if (res.meta.status !== 200) return this.$message.error('删除用户失败')
      this.$message.success('删除用户成功')
      this.getShopBusiList()
    }
  }
}
</script>

<style scoped lang="less">

</style>
